<template>
	<div>
		<div class="title f f-a-c">
			<div class="f f-d-c f-a-c">
				<div class="one f f-a-c">
					<img src="/src/assets/user/dui.png" class="duiImg" alt="" />
					<div class="xian"></div>
				</div>
				<div class="voun">Submitted successfully</div>
			</div>
			<div class="f f-d-c f-a-c">
				<div class="one f f-a-c">
					<div v-show="num >= 3" class="xian"></div>
					<div v-show="num < 3" class="xians"></div>
					<img v-show="num == 3" src="/src/assets/user/tow1.png" class="duiImg" alt="" />
					<img v-show="num > 3" src="/src/assets/user/dui.png" class="duiImg" alt="" />
					<div v-show="num >= 4" class="xian"></div>
					<div v-show="num < 4" class="xians"></div>
				</div>
				<div class="voun">Under review</div>
			</div>
			<div class="f f-d-c f-a-c">
				<div class="one f f-a-c">
					<div v-show="num >= 4" class="xian"></div>
					<div v-show="num < 4" class="xians"></div>
					<img v-show="num == 4" src="/src/assets/user/three1.png" class="duiImg" alt="" />
					<img v-show="num < 4" src="/src/assets/user/three2.png" class="duiImg" alt="" />
					<img v-show="num > 4" src="/src/assets/user/dui.png" class="duiImg" alt="" />
					<div v-show="num >= 5" class="xian"></div>
					<div v-show="num < 5" class="xians"></div>
				</div>
				<div class="voun">Request modification</div>
			</div>
			<div class="f f-d-c f-a-c">
				<div class="ones f f-a-c">
					<div v-show="num == 5" class="xian"></div>
					<div v-show="num < 5" class="xians"></div>
					<img v-show="num < 5" src="/src/assets/user/four2.png" class="duiImg" alt="" />
					<img v-show="num == 5" src="/src/assets/user/dui.png" class="duiImg" alt="" />
				</div>
				<div class="voun">Approval</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, defineProps } from "vue";

	const props = defineProps({
		num: {
			type: Number,
			default: 1
		}
	});
</script>
<style lang="scss" scoped>
	.title {
		width: 1120px;
		height: 76px;
		margin: 0 auto;
		// background-color: pink;
		.ones {
			width: 280px;
			height: 100%;
			justify-content: baseline;
			.duiImg {
				width: 40px;
				height: 40px;
			}
			.xian {
				height: 0;
				width: 120px;
				border: 1px solid #3f51b5;
			}
			.xians {
				height: 0;
				width: 120px;
				border: 1px solid #bac0e4;
			}
		}
		.one {
			width: 280px;
			height: 100%;
			justify-content: end;
			.duiImg {
				width: 40px;
				height: 40px;
			}
			.xian {
				height: 0;
				width: 120px;
				border: 1px solid #3f51b5;
			}
			.xians {
				height: 0;
				width: 120px;
				border: 1px solid #bac0e4;
			}
		}
	}
	.voun {
		font-size: 14px;
		font-family: Manrope, Manrope-400;
		font-weight: 400;
		text-align: center;
		color: #02102e;
		margin-top: 12px;
	}
</style>
